<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="top-search">
        <h2 class="c-d2 f-w-600">商标查询</h2>
        <div class="flx-row-s-c">
          <div
            class="type-select-item"
            v-for="(item, index) in typeList"
            :key="index"
            :class="[index == typeSelect ? 'active' : 'normal']"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="flx-row-s-c" style="margin-top: 13px">
          <input
            v-model.trim="search"
            type="text"
            class="search"
            placeholder="请输入关键字查询"
            maxlength="50"
            @keyup.enter="submit"
          />
          <div class="search-buttom">查询</div>
        </div>
      </div>
      <div class="top-search" style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="f-16 c-d" style="margin-bottom: 25px">
          经查询“<span class="c-o">{{ search }}</span
          >”尚未查询到同名商标，可尝试注册:
        </div>
        <div class="flx-row-s-c" style="flex-wrap: wrap">
          <div class="item-box flx-row-s-c">
            <div style="margin-right: 25px">
              <h3 class="f-18 c-d f-w-600" style="margin-bottom: 10px">
                顾问注册
              </h3>
              <span class="f-16 c-g"
                >专业顾问一对一服务<span class="c-o">600</span>元起</span
              >
            </div>
            <div class="user-strong-button normal-button-size">前往购买</div>
            <div class="tip">荐</div>
          </div>
          <div class="item-box flx-row-s-c">
            <div style="margin-right: 25px">
              <h3 class="f-18 c-d f-w-600" style="margin-bottom: 10px">
                顾问注册
              </h3>
              <span class="f-16 c-g"
                >专业顾问一对一服务<span class="c-o">600</span>元起</span
              >
            </div>
            <div class="user-strong-button normal-button-size">前往购买</div>
            <div class="tip">荐</div>
          </div>
          <div class="item-box flx-row-s-c">
            <div style="margin-right: 25px">
              <h3 class="f-18 c-d f-w-600" style="margin-bottom: 10px">
                顾问注册
              </h3>
              <span class="f-16 c-g"
                >专业顾问一对一服务<span class="c-o">600</span>元起</span
              >
            </div>
            <div class="user-strong-button normal-button-size">前往购买</div>
            <div class="tip">荐</div>
          </div>
        </div>
        <span class="c-g f-14"
          >注:查询建议仅为参考，商标注册还需判断近似风险，若无商标注册经验，建议您选择顾问注册。</span
        >
      </div>
      <div class="top-search flx-row-bw-s">
        <div class="flx-row-s-s">
          <span class="c-d2 f-14 f-w-600" style="margin-top: 6px"
            >商标分类：</span
          >
          <div
            class="flx-row-s-s categary-area"
            :class="{ 'categary-box': !suffixOpen }"
          >
            <div
              class="type-select-item"
              style="margin: 6px 12px"
              v-for="(item, index) in categaryList"
              :key="index"
              :class="[item.select ? 'active' : 'normal']"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div
          class="c-g f-14 flx-row-s-c open-bottom"
          style="margin-top: 6px"
          @click="suffixOpen = !suffixOpen"
        >
          展开
          <div class="icon">
            <div
              class="dir-icon"
              :class="{ 'dir-icon-active': suffixOpen }"
            ></div>
          </div>
        </div>
      </div>
      <div class="bottom-area">
        <div class="filter-area flx-row-bw-c">
          <div class="flx-row-s-c">
            <Select v-model="status" style="width: 200px">
              <Option
                v-for="item in statusList"
                :value="item.value"
                :key="item.value"
                >{{ item.name }}</Option
              >
            </Select>
            <div class="c-d f-14" style="margin-left: 15px">
              温馨提醒∶商标检索结果仅供参考，不作为商标能否注册的法律依据﹔具体以<a
                class="c-b"
                >商标局官网</a
              >查询为准。
            </div>
          </div>
          <span class="c-d2 f-14" v-if="total != null"
            >共有<span class="c-b">{{ total }}</span
            >个搜索结果</span
          >
        </div>
        <div class="list-area" style="position: relative">
          <Spin :withIcon="true" v-if="loading"></Spin>
          <div class="list-area">
            <div class="list-item flx-row-bw-s" v-for="(item, index) in list" :key="index">
              <div class="image" v-lazy:background-image=""></div>
              <div style="width: 910px;">
                <div class="flx-row-bw-c" style="margin-bottom: 15px;">
                  <div class="flx-row-s-c">
                    <h3 class="f-16 c-d2 f-w-600">一无所有</h3>
                    <div class="status-tip yellow">已消亡</div>
                    <!-- <div class="status-tip blue">待审中</div> -->
                    <!-- <div class="status-tip green">已注册</div> -->
                  </div>
                  <div class="flx-row-s-c">
                    <div class="user-strong-button small-button-size" style="margin-right:15px;">顾问注册</div>
                    <div class="user-normal-button small-button-size">快速注册</div>
                  </div>
                </div>
                <div class="flx-row-s-s f-12 c-d2">
                  <div style="flex: 1.5">
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">注册号：</span>
                      <span class="w-p-100">safdsa</span>
                    </div>
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">商标类别：</span>
                      <span class="w-p-100">第25类  服装鞋帽</span>
                    </div>
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">组群分类：</span>
                      <span class="w-p-100">2501；2015；2020；2150；2150；2150；2501；2015；2020；2150；2150；2150；</span>
                    </div>
                  </div>
                  <div style="flex: 1">
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">申请人：</span>
                      <span class="w-p-100">林威盛</span>
                    </div>
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">初审公告期号：</span>
                      <span class="w-p-100">1161</span>
                    </div>
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">初审公告日期：</span>
                      <span class="w-p-100">2009-03-27</span>
                    </div>
                  </div>
                  <div style="flex: 1">
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">注册号：</span>
                      <span class="w-p-100">2009-03-27</span>
                    </div>
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">商标类别：</span>
                      <span class="w-p-100">1161</span>
                    </div>
                    <div class="flx-row-s-s m-b-6">
                      <span class="c-g i-title">组群分类：</span>
                      <span class="w-p-100">2009-03-27</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-page-bottom-area flx-row-e-c">
            <Page
              :total="total"
              :current="page"
              :page-size="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-elevator
              show-sizer
              show-total
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      formLoading: false,
      breadCrumb: [{ name: "商标服务", to: "/rmregister" }],
      typeList: [
        { name: "商标服务" },
        { name: "注册号" },
        { name: "申请主题" },
        { name: "商标图样" },
      ],
      typeSelect: 0,
      search: "",
      categaryList: [
        { name: "01 化学原料", select: true },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
      ],
      suffixOpen: false,
      statusList: [
        {
          value: -1,
          name: "全部",
        },
        {
          value: 0,
          name: "已注册",
        },
        {
          value: 1,
          name: "待审核",
        },
        {
          value: 2,
          name: "已消亡",
        },
      ],
      status: null,

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [1],
    };
  },
  methods: {
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .top-search {
    background-color: #fff;
    padding: 20px 30px;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;

    h2 {
      font-size: 18px;
      margin-bottom: 6px;
    }
    .type-select-item {
      font-weight: 400;
      transition: color 0.3s, font-weight 0.3s;
      margin-right: 25px;
      cursor: pointer;

      &.normal {
        @include h-c(null, null, rgba($color: #3d3d3d, $alpha: 0.8), #f9521f);
      }
      &.active {
        font-weight: 600;
        color: #f9521f;
      }
    }
    .search {
      @include size(410px, 46px);
      background-color: #fff;
      padding-left: 20px;
      padding-right: 15px;
      border: #f9521f solid 1px;
      border-radius: 5px 0 0 5px;
      line-height: 44px;
      font-size: 14px;
      color: #3d3d3d;
    }
    .search-buttom {
      @include size(95px, 46px);
      @include h-c(#f9521f, #fa754c, #fff, null);
      @include btn-s(null, 46px, 0 5px 5px 0);
      font-size: 14px;
    }
    .item-box {
      padding: 24px 12px;
      border: 1px solid #b1b1b1;
      width: fit-content;
      border-radius: 4px;
      position: relative;
      margin-right: 20px;
      min-width: 359px;
      margin-bottom: 25px;

      .tip {
        @include size(21px);
        background-color: #fa754c;
        color: #fff;
        border-radius: 0 4px 0 0;
        position: absolute;
        top: -1px;
        right: -1px;
        text-align: center;
        line-height: 21px;
        font-size: 12px;
      }
    }
    .categary-box {
      height: 33px;
      overflow: hidden;
    }
    .categary-area {
      width: 1010px;
      flex-wrap: wrap;
    }
  }
  .bottom-area {
    border: 1px solid #eaeaea;
    background-color: #fff;
    margin-bottom: 20px;

    .filter-area {
      background-color: #eceff3;
      padding: 12px 30px;
    }
    .list-item {
      padding: 20px 30px;
      border-bottom: 1px dashed #eaeaea;

      .image {
        @include bg-setting(null, cover, center);
        @include size(201px, 119px);
        background-color: #ededed;
        border: 1px solid #ededed;
        transition: opacity 0.3s;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
      h3 {
        max-width: 576;
        @include f-ell-sin;
      }
      .i-title {
        margin-right: 12px;
        flex-shrink: 0;
      }
      .m-b-6 {
        margin-bottom: 6px;
      }
    }
  }
}
.open-bottom {
  cursor: pointer;
  .icon {
    width: 15px;
    padding-left: 3px;

    .dir-icon {
      @include size(12px, 6px);
      @include bg-setting("g-down");
      transform: rotate(0);
      transition: transform 0.3s, background-image 0.3s;
    }
    .dir-icon-active {
      transform: rotate(-180deg);
    }
  }

  &:hover {
    color: #f9521f;

    .dir-icon {
      @include bg-setting("o-down");
    }
  }
}
.status-tip {
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  height: 20px;
  line-height: 18px;
  padding: 0 3px;
  line-height: 20px;
  font-size: 12px;
  margin-left: 12px;

  &.yellow {
    color: #FF882F;
    border-color: #FF882F;
  }
  &.green {
    color: #28D269;
    border-color: #28D269;
  }
  &.blue {
    color: #1C9CDF;
    border-color: #1C9CDF;
  }
}
.list-area {
  min-height: 160px;
}
</style>